import React, { PureComponent } from "react";
import Home from "./pages/home";
import Profile from "./pages/profile";
import './style.css'
import store from "./store";
import About from "./pages/about";
import Category from "./pages/category";

export class App extends PureComponent {
  constructor() {
    super()
    this.state = {
      count: store.getState().count.count
    }
  }

  componentDidMount() {
    store.subscribe(() => {
      this.setState({
        count: store.getState().count.count
      })
    })
  }

  render() {
    const { count } = this.state
    return (
      <div>
        <div>App count: {count}</div>
        <div className="content">
          <div  className="item">
            <Home></Home>
          </div>
          <div className="item">
            <Profile></Profile>
          </div>
          <div className="item">
            <About></About>
          </div>
        </div>
        <Category></Category>
      </div>
    )
  }
}

export default App;
